<template>
	<view class="myyeji">
		<headertop str1="oridei" :back1="back1" title="我的业绩"></headertop>
		<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11615@2x.png" class="yuechongzhiback"
			mode=""></image>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">

		</view>
		<view class="tduiinfo">
			<view class="yaoqingbox" @click="sc" style="position: absolute;">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/微信图片_20250603144437.png"
					class="yaoqingbox_back" mode=""></image>
				<span style="margin-left: 34rpx;">邀请好友</span>
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/wwFrame@2x(1).png" class="xjt" mode="">
				</image>
			</view>
			<view class="ttbt">
				我的团队
			</view>
			<view class="tdboxs">
				<view :class="active==0?'box solid':'box'" @click="qiehuan(0)">
					<view class="texts">
						<view class="t1">
							{{total}}
						</view>
						<view class="xbt">
							团队总数
						</view>
					</view>
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Framewx@2x(1).png" class="imgr"
						mode=""></image>
				</view>
				<view :class="active==1?'box solid':'box'" @click="qiehuan(1)">
					<view class="texts">
						<view class="t1">
							{{total1}}
						</view>
						<view class="xbt">
							业绩总数
						</view>
					</view>
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(1)wx.png" class="imgr"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="bottomcontent">
			<view class="tabqiehuan" v-if="active==0">
				<view :class="query.type==1?'tbox aa':'tbox'" @click="qiehuan1(1)">
					直推
					<view class="active" v-if="query.type==1">

					</view>
				</view>
				<view :class="query.type==2?'tbox aa':'tbox'" @click="qiehuan1(2)">
					间推
					<view class="active" v-if="query.type==2">

					</view>
				</view>
			</view>
			<view class="ztcenter">
				<view class="msgicon" v-if="!list.length">
					<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(21).png" mode="widthFix">
					</image>
					<view class="msgtext">
						暂无内容
					</view>
				</view>
				<view class="ztbox1" v-else v-for="item in list" :key="item.id">
					<image :src="item.avatar" class="avtar" mode="widthFix"></image>
					<view
						style="width: 560rpx;display: flex;justify-content: space-between;align-items: center;position: relative;">
						<view class="texts">
							<view class="t1">
								{{item.nickname}}
							</view>
							<view class="t2" v-if="active==1">
								备注：{{item.memo}}
							</view>
							<view class="t2" v-if="active==1">
								时间：{{item.createtime}}
							</view>
							<view class="t2" v-if="active==0">
								注册时间：{{item.jointime}}
							</view>
							<!-- <view class="t2" v-if="active==1">
								开通时间：{{item.commission_time}}
							</view> -->
						</view>
						<view class="rightnum" v-if="active==1">
							+{{item.amount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" @close="close" mode="center">
			<view class="popuimg">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11621@2x.png" class="image"
					mode=""></image>
				<image :src="userobj['erweima']" class="erweimaimg" mode=""></image>
			</view>
			<view class="btnss">
				<view class="btn1" @click="preservationImg(src)">
					保存海报
				</view>
				<button class="btn1" open-type="share" @chooseavatar="onChooseAvatar">
					分享海报
				</button>
			</view>
		</up-popup>
		<l-painter css="width: 688rpx;position: relative;overflow: hidden;" pathType="url" ref="poster" @done="done"
			v-show="false">
			<l-painter-view
				css="width: 688rpx;overflow: hidden;position: relative;display: flex; flex-direction: column;align-items: center;">
				<l-painter-image css="width: 100%;height: 1172rpx;"
					src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11621@2x.png" mode="">
				</l-painter-image>
				<l-painter-image
					css="width: 218rpx;height: 218rpx;margin-top: 878rpx;position: absolute;margin-left:236rpx"
					:src="userobj['erweima']" mode=""> </l-painter-image>
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import lPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue'
	import {
		myteam,
		yejimx,
		userinfo
	} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const back1 = ref('')
	const poster = ref('')
	const active = ref(0)
	const active1 = ref(0)
	const list = ref([])
	const show = ref(false)
	const total = ref(0)
	const total1 = ref(0)
	const flag = ref(false)
	const src = ref('')
	const last_page = ref(0)
	const userobj = ref({})
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const query = reactive({
		list_rows: 10,
		page: 1,
		type: 1
	})
	onLoad(() => {
		init()
		getuser()
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
			total.value = userobj.value.tuandui
			total1.value = userobj.value.yeji
		}
	}

	function done() {

		uni.hideLoading();
		flag.value = true
	}
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}

	})

	function close() {
		show.value = false
	}
	onReachBottom(() => {
		if (last_page.value > query.page) {
			query.page++
			init()
		}
	})

	function sc() {
		show.value = true

	}

	function qiehuan(num) {
		active.value = num
		query.page = 1
		list.value = []
		init()
	}

	function onShareAppMessage() {
		return {
			title: '唇齿留香小程序', //分享的名称
			path: '/pages/home/index?scene=' + userobj.value.id
			//页面的路径
		}
	}
	//分享到朋友圈
	function onShareTimeline() {
		return {
			title: '唇齿留香小程序',
			path: '/pages/home/index?scene=' + userobj.value.id
		}
	}
	// 保存图片
	function preservationImg(img) {
		uni.showLoading({
			title: '正在保存'
		})
		poster.value.canvasToTempFilePathSync({
			fileType: 'png',
			quality: 1,
			success: (res) => {
				uni.hideLoading()

				src.value = res.tempFilePath
				bc(src.value)
			}
		})
	}

	function bc(img) {
		let that = this
		uni.getSetting({
			success(res) {

				if (res.authSetting['scope.writePhotosAlbum']) {
					imgApi(img);
				} else {
					// that.opensit()
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success(res) {
							imgApi(img);
						}
					})
				}
			}
		})
	}

	function imgApi(image) {
		/* 获取图片的信息 */
		uni.getImageInfo({
			src: image,
			success: function(image) {
				/* 保存图片到手机相册 */
				uni.saveImageToPhotosAlbum({
					filePath: image.path,
					success: function() {
						uni.showModal({
							title: '保存成功',
							content: '图片已成功保存到相册',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {

								}
							}

						});
					},
					complete(res) {

					}
				});
			}
		});
	}

	function qiehuan1(num) {
		query.type = num
		query.page = 1
		list.value = []
		init()
	}

	async function totalinit() {
		const res = await myteam(query)
		if (res.code == 1) {
			total.value = res.data.total
		}
		const res1 = await yejimx(query)
		if (res1.code == 1) {
			total1.value = res1.data.list.total
		}
	}
	async function init() {
		if (active.value == 0) {
			const res = await myteam(query)
			if (res.code == 1) {
				list.value.push(...res.data.data)
				last_page.value = res.data.last_page
			}

		} else {
			const res1 = await yejimx({
				list_rows: 10,
				page: query.page,
				type: '',
				tab: 'all'
			})
			if (res1.code == 1) {
				list.value.push(...res1.data.list.data)
				last_page.value = res1.data.list.last_page
			}
		}
	}
</script>

<style lang="scss">
	button {
		align-items: center;
		overflow: auto !important;
		background: none !important;
		background-color: none !important;
		background-size: 100% 138% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0rpx !important;
		-webkit-tap-highlight-color: none !important;
		overflow: hidden !important;
		margin-right: 0rpx !important;

		&:after {
			background: none !important;
			border: none;
			background-color: none !important;
			display: none !important;
		}
	}

	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.popuimg {
		width: 688rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 100%;
			height: 1172rpx;
		}

		.erweimaimg {
			width: 218rpx;
			height: 218rpx;
			margin-top: 878rpx;
			position: absolute;
		}

	}

	.btnss {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn1 {
			width: 328rpx;
			height: 84rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			line-height: 84rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.rightnum {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #F53F3F;
		position: absolute;
		right: 32rpx;
	}

	.solid {
		border: 2rpx solid #A46F3A !important;
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.myyeji {
		width: 100%;
		overflow: hidden;

		.bottomcontent {
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(240, 206, 169, 0.38);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			margin-top: 44rpx;

			.tabqiehuan {
				width: 396rpx;
				margin: auto;
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tbox {
					width: 128rpx;
					height: 84rpx;
					text-align: center;
					line-height: 84rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #1D2129;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.active {
						position: absolute;
						width: 48rpx;
						bottom: 0%;
						height: 4rpx;
						background: #A46F3A;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}

				.aa {
					color: #A46F3A;
				}
			}

			.ztcenter {
				width: 686rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 40rpx;

				.ztbox1 {
					width: 686rpx;
					height: 152rpx;
					background: #F7F8FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					align-items: center;
					margin-bottom: 28rpx;

					.avtar {
						width: 96rpx;
						height: 96rpx;
						margin-left: 28rpx;
						border-radius: 50%;
					}

					.texts {
						margin-left: 24rpx;
						overflow: hidden;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #1D2129;
						}

						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							margin-top: 12rpx;
							color: #86909C;
						}
					}
				}
			}
		}

		.yuechongzhiback {
			width: 100%;
			height: 40vh;
			position: absolute;
			z-index: -1;
		}

		.tduiinfo {
			width: 630rpx;
			margin: auto;
			// margin-top: 10rpx;
			overflow: hidden;
			position: relative;

			.yaoqingbox {
				width: 194rpx;
				height: 56rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				position: absolute;
				right: 0%;
				top: 0%;
				display: flex;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				align-items: center;
				margin-top: 10rpx;

				.xjt {
					width: 18rpx;
					height: 18rpx;
					margin-left: 14rpx;
				}

				&_back {
					width: 194rpx;
					height: 56rpx;
					z-index: -1;
					position: absolute;
				}
			}

			.ttbt {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #A87652;
				margin-top: 10%;
			}

			.tdboxs {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 66rpx;

				.box {
					width: 300rpx;
					height: 136rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					background: rgba(255, 255, 255, 0.52);
					box-shadow: 0rpx 4rpx 8rpx 0rpx #E4C192;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.imgr {
						width: 88rpx;
						height: 88rpx;
						margin-right: 36rpx;
					}



					.texts {
						overflow: hidden;
						margin-left: 28rpx;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 40rpx;
							color: #A87652;
						}

						.xbt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #1D2129;
							margin-top: 12rpx;
						}
					}
				}
			}
		}
	}
</style>